import React, { Component } from 'react'
import { FormDivider } from '@/components/DividerItem'
import { Icon } from 'antd'
import styled from 'styled-components'
import MessageTable from './components/MessageTable'
import { connect } from 'dva'
const MySpan = styled.span`
  color: #ED7109; 
  font-size: 15px;
  margin-left: 12px;
  display: inline-block;
  margin-bottom: 34px;
`
@connect(({message}) => ({
  detail: message.detail
}))
export default class Message extends Component<any, any> {
  state = {
    isOpen: true
  }
  onChange = () => {
    this.setState({
      isOpen: !this.state.isOpen
    }, () => {
      //整家单位的开启与关闭
      const { detail, dispatch } = this.props
      const { id } = detail
      let isMessage=null
      let isTelephone=null
      if( this.state.isOpen=== true ){
        isMessage=1
        isTelephone=1
      }else{
        isMessage=0
        isTelephone=0
      }
      let payload = {
        id,
        valueRule:{
          isMessage,
          isTelephone,
        }
      }
      dispatch({
        type: 'message/modifyDetail',
        payload
      })
    })
  }
  componentDidMount(){
    const { dispatch } = this.props
    dispatch({
      type:'message/queryDetail'
    }).then(() => {
      const { detail } = this.props
      const { valueRuleList = {} } = detail
      if( (valueRuleList.isMessage === 0 && valueRuleList.isTelephone === 0) || !valueRuleList.hasOwnProperty('isMessage')){
        this.setState({
          isOpen: false
        })
      }
    })
  }
  render() {
    const { isOpen } = this.state
    const MessageTableC = FormDivider('message', '火警推送时电话短信通知', isOpen, this.onChange.bind(this, 'message'))

    return (
      <> 
       <MessageTableC/> 
       {
         this.state.isOpen && 
         (
          <>
            <div style={{marginLeft: 100}}>
            <Icon type="issues-close" style={{ color: '#ED7109', fontSize: 16 }} />
            <MySpan>单位发生火警报警时将以电话短信形式通知用户</MySpan>
            </div>
            <MessageTable/>
         </>
         )
       }
     
      </>
    )
  }
}
